<template>
  <div>
    <div class="main-wrap">
      <!-- <div class="banner linear-bg-blue"> -->

      <!-- <div class="base-info">
          <img :src="account.logo" mode="aspectFill" class="logo" />
          <div>
            <h1 class="shop-name">{{account.shopName}}</h1>
            <span class="small">店长</span>
          </div>
        </div>
        <div class="wallet-info">
          <a href="/pages/mine/balance/main" class="small-block">
            <p class="name">余额</p>
            <span>{{wallet.freeAssets}}</span>
          </a>
          <a href="/pages/mine/pension/main" class="small-block">
            <p class="name">豆豆</p>
            <span>{{wallet.pension}}</span>
          </a>
          <div class="small-block">
            <p class="name">积分</p>
            <span>{{wallet.integral}}</span>
          </div>
      </div>-->
      <!-- </div> -->
      <div class="backgroundImg">
        <img :src="themeImg" mode="aspectFill" />
      </div>

      <div class="order-panel">
        <div class="shop-info">
          <div class="left">
            <img :src="account.logo" mode="aspectFill" class="logo" />
            <div>
              <span>{{account.shopName}}</span>
              <p style="font-size:12px;color:#9b9b9b;">
                今日订单数
                <span style="color:#ffbe0d;">{{dayNum}}</span>
              </p>
            </div>
          </div>
          <!-- <div class="linkBox" @click="linkShop">
            <span>进店看看</span>
            <img :src="linkImg" mode="aspectFill" class="linkImg" />
          </div>-->
        </div>
        <div class="dataNum">
          <div @click="balanceClick">
            <p>余额</p>
            <span>￥{{wallet.freeAssets}}</span>
          </div>
          <div @click="doudouClick">
            <p>豆豆</p>
            <span>{{wallet.pension}}</span>
          </div>
        </div>
      </div>
      <div class="navDiv">
        <div
          v-for="(item,index) in navList"
          :key="index"
          @click="navClick(item)"
        >
          <img :src="item.icon" mode="aspectFill" />
          <span>{{item.name}}</span>
        </div>
      </div>

      <!-- <i-cell-group class="link">
        <i-cell
          v-for="(item,idx) in list1"
          :key="idx"
          :title="item.name"
          is-link
          :url="item.url"
        >
          <img slot="icon" :src="item.icon" mode="aspectFill" class="icon" />
          <p
            v-if="item.name === '通知' && messageNum"
            class="messageHitn"
          >{{messageNum}}</p>
        </i-cell>
      </i-cell-group>-->
      <!-- <div class="linkBox"></div> -->

      <i-cell-group class="link">
        <i-cell
          v-for="(item,idx) in list2"
          :key="idx"
          :title="item.name"
          is-link
          :url="item.url"
          @click="handleBusiness(item)"
        >
          <img slot="icon" :src="item.icon" mode="aspectFill" class="icon" />
          <span
            v-if="!item.url"
            slot="footer"
            class="shop-state"
            :class="{stop:shopState===2}"
            @click="handleBusiness(item)"
          >{{state[shopState]}}</span>
        </i-cell>
      </i-cell-group>
    </div>
    <vue-tab-bar
      @fetch-index="clickIndexNav"
      :selectNavIndex="selectNavIndex"
      :needButton="needButton"
    ></vue-tab-bar>

    <div>
      <p @click="liveBroadcast">开直播</p>
      <p @click="seeLiveBroadcast">看直播</p>
    </div>
  </div>
</template>

<script>
import vueTabBar from '../../../components/vueTabBar'

import {
  FIND_SHOP_BASE_INFO,
  UPDATE_SHOP_BASE_INFO,
  MESAGE_NOTIFY_FIND_UNREAD_NUM_API,
  FIND_SHOP_ORDER_PAGE,
  FIND_SHOP_URL
} from '@/api'

export default {
  components: { vueTabBar },
  props: {},
  data () {
    return {
      messageNum: 0,
      wallet: { freeAssets: 0, integral: 0, pension: 0 },
      list1: [
        // {
        //   name: '通知',
        //   url: '/pages/mine/inform/index/main',
        //   icon: 'https://akk.028wkf.cn/kdb-weapp-img/icon/zhgl.png'
        // },
        {
          name: '云账户',
          url: '/pages/mine/cloud-account/index/main',
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/yzh.png'
        },
        {
          name: '商户配置',
          url: '/pages/mine/shop-config/index/main',
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/shpz.png'
        }
        // {
        //   name: '帐户管理',
        //   url: '#',
        //   icon: 'https://akk.028wkf.cn/kdb-weapp-img/icon/zhgl.png'
        // },
        // {
        //   name: '短信充值',
        //   url: '/pages/mine/noteTopUp/main',
        // 这个图片已经删除了
        //   icon: 'https://akk.028wkf.cn/kdb-weapp-img/icon/dxcz.png'
        // }
      ],
      list2: [
        // {
        //   name: '店铺信息',
        //   url: '/pages/mine/shop-info/index/main',
        // 这个图片已经删除了
        //   icon: 'https://akk.028wkf.cn/kdb-weapp-img/icon/dpxx.png'
        // },
        {
          name: '一键暂停营业',
          url: null,
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/icon/yjztyy.png'
        },
        {
          name: '设置',
          url: '/pages/mine/setting/index/main',
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/icon/wd_sz.png'
        }
      ],
      state: {
        1: '营业中',
        2: '暂停营业中'
      },
      shopState: 1,
      dayNum: 0,
      linkImg:
        'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/store_management_shop.png',
      bannerImg:
        'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_msg_title.png',
      navList: [
        {
          name: '云账户',
          url: '/pages/mine/cloud-account/index/main',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/mine_yzh.png'
        },
        {
          name: '店铺配置',
          // url: '/pages/mine/shop-config/index/main', // 之前的商户配置
          url: '/pages/mine/shop-info/index/main',
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/mine_dppz.png'
        },
        {
          name: '账户管理',
          url: '/pages/mine/admin-manage/index/main',
          // url: null, // to do 暂时注释了，功能未测试
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/mine_zhgl.png'
        },
        {
          name: '短信充值',
          // url: '/pages/mine/noteTopUp/main',
          url: null,
          icon:
            'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/mine_dxcz.png'
        }
      ],
      selectNavIndex: 2,
      needButton: true
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    },
    themeImg () {
      let appId = this.$store.state.appId
      if (appId !== 'wx657f1b2fb50b5be3') {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_msg_title.png'
      } else {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bg_msg_title2.png'
      }
    }
  },
  onShareAppMessage () {
    return {
      title: '开店宝',
      path: '/pages/login/index/main',
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.getShopBaseInfo()
    this._findMessageAllNum()
    this.getDayOrderNum()
    wx.hideTabBar()
  },
  methods: {
    liveBroadcast () {
      this.$router.push('/pages/mine/broadcast/main')
    },
    seeLiveBroadcast () {
      this.$router.push('/pages/mine/broadcastsee/main')
    },
    linkShop () {
      this.findShopURL()
    },
    balanceClick () {
      this.$router.push('/pages/mine/balance/main')
    },
    doudouClick () {
      this.$router.push('/pages/mine/pension/main')
    },
    handleBusiness (item) {
      const vm = this

      if (item.name === '一键暂停营业') {
        let msg =
          vm.shopState === 1
            ? '您的店铺将不再出售商品，是否确定暂停营业？'
            : '将再度开始营业，是否继续？'
        let state = vm.shopState === 1 ? 2 : 1
        vm.$dialog(msg, '').then(() => {
          vm.updateShopBusinessState(state)
        })
      }
    },
    findShopURL () {
      const vm = this
      let params = {
        shopId: vm.account.shopId,
        isOffline: false
      }
      FIND_SHOP_URL(params)
        .then(r => {
          if (r.data.code === '0') {
            let token = r.data.data.split('?token=')[1]
            let url = encodeURIComponent(
              `https://akk.028wkf.cn/small-store?token=${token}`
            )
            console.log('url', decodeURIComponent(url))
            vm.$router.push(
              `/pages/open-shop/link2/main?openURL=${url}
              }`
            )
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },

    getShopBaseInfo () {
      const vm = this

      FIND_SHOP_BASE_INFO(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            let { pension, integral, freeAssets, state } = r.data.data
            vm.shopState = state
            vm.wallet = {
              pension,
              integral,
              freeAssets: (freeAssets * 0.01).toFixed(2)
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    updateShopBusinessState (state) {
      const vm = this

      let params = {
        shopId: vm.account.shopId,
        state
      }

      UPDATE_SHOP_BASE_INFO(params)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            vm.shopState = state
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    _findMessageAllNum () {
      const vm = this
      MESAGE_NOTIFY_FIND_UNREAD_NUM_API(vm.account.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.messageNum = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getDayOrderNum () {
      const vm = this
      let day = new Date()
      day.setTime(day.getTime())
      let date =
        day.getFullYear() + '-' + (day.getMonth() + 1) + '-' + day.getDate()
      let params = {
        shopId: vm.account.shopId,
        state: '3,7',
        orderDateEnd: `${date} 23:59:59`,
        orderDateStart: `${date} 00:00:00`
      }
      FIND_SHOP_ORDER_PAGE(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            vm.dayNum = r.data.data.total
          } else {
            vm.$toast(r.data.message)
            vm.dayNum = 0
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    navClick (item) {
      const vm = this
      if (item.url) {
        vm.$router.push(item.url)
      } else {
        vm.$toast('暂未开放')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.main-wrap {
  > .backgroundImg {
    width: 100%;
    height: 194.5px;
    img {
      width: 100%;
      height: calc(250px / 2);
    }
  }
  > .banner {
    > .base-info {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 10px;
      > .logo {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10px;
      }
      .shop-name {
        font-size: 18px;
      }
      .small {
        font-size: 12px;
      }
    }
    > .wallet-info {
      display: flex;
      justify-content: center;
      align-items: center;
      > .small-block {
        // width: 30%;
        width: 50%;
        text-align: center;
        font-size: 15px;
        &:not(:last-child) {
          border-right: 1px solid $light-white;
        }
        > .name {
          margin-bottom: 5px;
        }
      }
    }
  }
  > .link {
    position: relative;
    &:last-child {
      border-top: 5px solid $gray;
    }
    .icon {
      display: block;
      width: 20px;
      height: 20px;
      overflow: hidden;
    }
    .shop-state {
      color: #68b07b;
      &.stop {
        color: #eda833;
      }
    }
    .messageHitn {
      font-size: 10px;
      background: #ff1515;
      color: #fff;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50px;
      position: absolute;
      top: 50%;
      right: 30px;
      transform: translate(0, -50%);
    }
  }
  > .linkBox {
    border-top: 3px solid #e7eefe;
  }
  > .order-panel {
    background: $white;
    border-radius: 8px;
    font-size: 15px;
    padding: 15px;
    position: absolute;
    width: calc(100% - 40px);
    left: 20px;
    top: 40px;
    box-shadow: 0px 3px 8px $light-black;
    z-index: 2;
    > .shop-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      > .left {
        display: flex;
        align-items: center;
        .logo {
          width: 54px;
          height: 54px;
          margin-right: 5px;
          border-radius: 4px;
        }
      }
      > .linkBox {
        position: relative;
        > span {
          width: 70px;
          font-size: 13px;
          color: #fff;
          position: absolute;
          top: 4px;
          right: 10px;
          z-index: 1;
        }
        > .linkImg {
          width: 90px;
          height: 28px;
        }
      }
    }
    > .dataNum {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      div {
        margin-top: 10px;
        width: 50%;
        height: 50px;
        font-size: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        p {
          color: #bfc3cb;
        }
        span {
          color: #ffbe0d;
        }
      }
    }
  }
  > .navDiv {
    width: 100%;
    display: flex;
    div {
      width: 25%;
      height: 140px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        width: 60px;
        height: 60px;
      }
      span {
        font-size: 14px;
        color: #000;
      }
    }
  }
}
</style>
